<template>
  <div class="dashboard-container">
    <el-container>
      <!-- 左侧导航栏 -->
      <el-aside width="220px" class="sidebar">
        <div class="system-title">
          <h2>区块链电子病历管理系统</h2>
        </div>
        <div class="user-info">
          <span class="username">{{ userInfo.username || '未设置' }}</span>
          <el-tag :type="roleTagType" size="small">{{ roleLabel }}</el-tag>
        </div>
        <Sidebar :role="userRole" />
      </el-aside>
      
      <el-container>
        <!-- 顶部栏 -->
        <el-header class="header">
          <div class="blockchain-account">
            <el-icon><Wallet /></el-icon>
            <span>区块链账户: {{ blockchainAccount || '未设置' }}</span>
          </div>
          <el-button type="text" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出登录</span>
          </el-button>
        </el-header>
        
        <!-- 主内容区 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store'
import Sidebar from '@/components/Dashboard/Sidebar.vue'
import { Wallet, SwitchButton } from '@element-plus/icons-vue'

const authStore = useAuthStore()
const router = useRouter()

const userRole = computed(() => authStore.userRole)
const userInfo = computed(() => authStore.userInfo || {})
const blockchainAccount = computed(() => authStore.blockchainAccount || '未设置')

const roleLabel = computed(() => {
  switch (userRole.value) {
    case 'patient': return '患者'
    case 'doctor': return '医生'
    case 'admin': return '管理员'
    default: return '未知角色'
  }
})

const roleTagType = computed(() => {
  switch (userRole.value) {
    case 'patient': return 'info'
    case 'doctor': return 'success'
    case 'admin': return 'warning'
    default: return ''
  }
})

const logout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.dashboard-container {
  height: 100vh;
  background-color: #f5f7fa;
}

.sidebar {
  background-color: #304156;
  height: 100vh;
  overflow: hidden;
}

.system-title {
  padding: 20px 15px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.system-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.user-info {
  padding: 15px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.blockchain-account {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.main-content {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
  overflow-y: auto;
}
</style>